<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>

<script src="../lib/three.js/build/three.min.js"></script>

<script type="text/javascript">

    var scene = null;
            var camera = null;
            var renderer = null;
            
            function init() {
                renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')    //绑定元素
                });
                renderer.setClearColor(0x000000);       
                scene = new THREE.Scene();          //创建场景
                
                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);    //创建照相机 ，添加属性 将照相机添加到场景中
                camera.position.set(5, 15, 25);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                var light = new THREE.AmbientLight(0xff0000);           //添加光照 。将光照添加到场景中
                scene.add(light);
                
                var greenCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),         //创建立方体 添加到场景中
                        new THREE.MeshLambertMaterial({color: 0x00ff00}));
                greenCube.position.x = 3;
                scene.add(greenCube);
                
                var whiteCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),          //创建立方体 添加到场景中
                        new THREE.MeshLambertMaterial({color: 0xffffff}));
                whiteCube.position.x = -3;
                scene.add(whiteCube);
                
                renderer.render(scene, camera);     //绘制
            }

</script>
</body>

</html>

<!--
    如果此时场景中没有物体，只添加了这个环境光，那么渲染的结果仍然是一片黑。
    
    我们将两个长方体材质的颜色分别设置为绿色和白色，渲染的结果是这两个长方体都被渲
染成了环境光的红色，这一结果可能有些出乎你的意料。其实，环境光并不在乎物体材质
的 color 属性，而是 ambient 属性
-->